<template>
  <div class="news main-item">
        <h2>新闻状态</h2>
        <ul class="new-container">
          <li class="news-card">
            <a href="#">
              <img src="/img/main/xinwen1.png" alt="">
              <div class="news-text">
                <h4>掌阅精选发起“世界读书日”党史学习公益阅读活动</h4>
                <span>2021/3/30</span>
                <span class="z_ellipsis">在第26个世界读书日之际,掌阅精选联合“58公益基金会”特别策划了一次意义非凡的公益阅读学习活动。</span>
                <div class="hover-btn">
                  <span>阅读全文</span>
                  <span></span>
                </div>
              </div>
            </a>
          </li>
          <li class="news-card">
            <a href="#">
              <img src="/img/main/xinwen2.png" alt="">
              <div class="news-text">
                <h4>掌阅精选助力网上“全国政协书院”建设</h4>
                <span>2021/3/11</span>
                <span class="z_ellipsis">“全国政协有个读书群”成为今年颇受瞩目的热点新闻。在今年政协常委会工作报告中提到，过去一年全国政协依托新媒体平台建立了47个委员主题读书群。</span>
                <div class="hover-btn">
                  <span>阅读全文</span>
                  <span></span>
                </div>
              </div>
            </a>
          </li>
          <li class="news-card">
            <a href="#">
              <img src="/img/main/xinwen3.png" alt="">
              <div class="news-text">
                <h4>掌阅科技发布2020年度数字阅读报告</h4>
                <span>2021/1/13</span>
                <span class="z_ellipsis">数字阅读用户年轻化趋势凸显</span>
                <div class="hover-btn">
                  <span>阅读全文</span>
                  <span></span>
                </div>
              </div>
            </a>
          </li>
          <li class="news-card">
            <a href="#">
              <img src="/img/main/xinwen4.png" alt="">
              <div class="news-text">
                <h4>上海市政协“国是书院”线上读书频道开通</h4>
                <span>2020/12/29</span>
                <span class="z_ellipsis">开通仪式在上海市政协举行</span>
                <div class="hover-btn">
                  <span>阅读全文</span>
                  <span></span>
                </div>
              </div>
            </a>
          </li>
        </ul>
        <a href="#" class="hover-btn">
          <span>查看跟多</span>
          <span></span>
        </a>
      </div>
</template>
<style scoped>
.news{
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-align: center;
  align-items: center;
}
.news h2{
  margin-bottom: 48px;
  font-weight: 500;
    font-size: 32px;
    text-align: center;
    color: #262626;
}
.news .new-container{
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  justify-content: space-between;
  flex-wrap: wrap;
    width: 100%;
    margin-bottom: 72px;
}
.news-card{
  width: 273px;
  height: 289px;
  border-radius: 12px;
  box-sizing: border-box;
  background-color: #fff;
  box-shadow: 0 4px 9px #ebecf4;
  cursor: pointer;
}
.news-card a{
  height: 100%;
  width: 100%;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-align: start;
  align-items: flex-start;
  color: #555;
}
.news-card img{
  width: 100%;
  height: 114px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border: 0 none;
}
.news-card .news-text{
  width: 100%;
  padding: 0 12px;
  box-sizing: border-box;
}
.news-card h4{
  font-size: 16px;
  color: #262626;
  line-height: 22px;
  height: 44px;
  margin: 12px 0 14px;
  font-weight: 400;
}
.news-text  span{
  font-size: 14px;
  color: #8c8c8c;
  line-height: 22px;
  display: block;
}
.news-card .z_ellipsis{
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.news-card .hover-btn{
  justify-content: flex-start;
  margin-top: 24px;
  display: flex;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  align-items: center;
  font-size: 12px;
  cursor: pointer;
  min-width: 68px;
}
.hover-btn span{
  color: #5788D9;
  display: inline-block;
  font-size: 14px;
  line-height: 2px;
}
.hover-btn span:nth-child(2){
  transition: transform .5s ease;
  margin-left: 4px;
  width: 15px;
  height: 5px;
  background: url(/img/main/jian.png)no-repeat left 50%/100% 100%;
}
</style>